<template>
  <div class="box">
    <span class="meeting-title"><img src="~@/assets/img/left-border.png"
           alt=""> 我的其他事项统计</span>
    <table class="myTable">
      <tr class="myTr">
        <td class="myTdLable">今日我的访客数</td>
        <td class="myTdValue">{{visitorNumber}}</td>
      </tr>
      <tr class="myTr">
        <td class="myTdLable">今日我发起的会议数</td>
        <td class="myTdValue">{{launchNumber}}</td>
      </tr>
      <tr class="myTr">
        <td class="myTdLable">今日我参与的会议数</td>
        <td class="myTdValue">{{joinNumber}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      visitorNumber: '',
      launchNumber: '',
      joinNumber: ''
    }
  },
  components: {
  },
  mounted () {
    this.onchange()
  },
  methods: {
    onchange () {
      console.log()
      this.$http.get('/tb/workbench/getMyOtherStatistics').then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.visitorNumber = res.data.visitorNumber
        this.launchNumber = res.data.launchNumber
        this.joinNumber = res.data.joinNumber
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 340px;
  padding: 10px 0 0 10px;
  position: relative;
  .meeting-title {
    color: #333;
    line-height: 40px;
    font-size: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .myTable {
    font-size: 20px;
    margin-top: 20px;

    .myTr {
      //   margin-top: 30px;
      line-height: 45px;

      .myTdLable {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .myTdValue {
        width: 200px;
        font-size: 23px;
        font-weight: 500;
        text-align: center;
        vertical-align: middle;
      }
    }
  }
}
</style>
